<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/topie_attention.css"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<!-- 没有轮播图 -->
	</head>
	<body>
		<div class="topie_attention">
			<ul class="tab">
				<li>
					<span>话题</span>
					
				</li>
				<li>
					<span>关注</span>
				</li>
			</ul>
			<div class="tab-con">
				<div class="item" style="display: block;">
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/501025475@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">+关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/话题/501025475@2x(2).png" >
					</div>
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/500577327@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">+关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/话题/501025475@2x(2).png" >
					</div>
					
					
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/500577327@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span><img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="img container">
						<img src="img/话题/圆角矩形%2010%20拷贝@2x.png" >
						<p style="font-size: 0.346666rem;padding: 0.186666rem 0;">每天进行10分钟按摩保证一整天精神</p>
					</div>
					
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/500577327@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">成功法则</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">+关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/话题/501025475@2x(2).png" >
					</div>
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/500577327@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">成功法则</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">+关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/话题/501030409@2x.png" >
					</div>
					<p class="text container">
						<span class="ttt">
							<img src="img/话题/500577327@2x.png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">成功法则</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">+关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/话题/501030409@2x.png" >
					</div>
				</div>
				<!-- /* 关注 */ -->
				<div class="item">
					
					<p class="text container">
						<span class="ttt">
							<img src="img/关注/501025475@2x(1).png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">已关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/关注/圆角矩形%2010@2x.png" >
					</div>
					<p class="text container">
						<span class="ttt">
							<img src="img/关注/500577327@2x(2).png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">已关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/关注/500577327@2x.png" >
					</div>
					
					<p class="text container">
						<span class="ttt">
							<span style="font-size: 0.48rem;">名师</span>
							<span style="font-size: 0.32rem;color: #EEEEEE;margin-left: 0.133333rem;">TEATHER</span>
						</span>
						<span><img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					
					
					<ul class="main_attention container">
						<li>
							<span><img src="img/关注/501025475@2x.png" ></span>
							<span style="font-size: 0.346666rem;">tonyni老师</span>
							<span style="font-size: 0.32rem;margin: 0.106666rem 0;">某某机构创始人CEO</span>
							<span>已关注</span>
						</li>
						<li>
							<span><img src="img/关注/501030409@2x.png" ></span>
							<span style="font-size: 0.346666rem;">SEVEN 老师</span>
							<span style="font-size: 0.32rem;margin: 0.106666rem 0;">某某机构创始人CEO</span>
							<span>已关注</span>
						</li>
						<li>
							<span><img src="img/关注/500577327@2x(2).png" ></span>
							<span style="font-size: 0.346666rem;">MISS LI 老师</span>
							<span style="font-size: 0.32rem;margin: 0.106666rem 0;">某某机构创始人CEO</span>
							<span>已关注</span>
						</li>
						<li>
							<span><img src="img/关注/501030409@2x(1).png" ></span>
							<span style="font-size: 0.346666rem;">onmi 老师</span>
							<span style="font-size: 0.32rem;margin: 0.106666rem 0;">某某机构创始人CEO</span>
							<span>已关注</span>
						</li>
					</ul>

					
					
					
					<p class="text container">
						<span class="ttt">
							<img src="img/关注/501025475@2x(1).png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">已关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/关注/圆角矩形%2010@2x(1).png" >
					</div>			
					<p class="text container">
						<span class="ttt">
							<img src="img/关注/501025475@2x(1).png" >
							<span style="font-size: 0.32rem;margin-left: 0.133333rem;">攻城狮子圈</span>
						</span>
						<span style="font-size: 0.32rem;color:orange;">已关注<img src="img/话题/椭圆%205%20拷贝%203@2x.png" ></span>
					</p>
					<div class="figure container">
						<figcaption>
							<p>论互联网的加班浪潮，对于零零七和九九六你有什么看法？</p>
							<p style="color: #9d9d9d;font-size: 0.32rem;margin: 0.066666rem 0; ">某某描述年轻人可能会更多选择高薪的加…</p>
						</figcaption>
						<img src="img/关注/圆角矩形%2010@2x.png" >
					</div>		
				</div>
				<!-- /* 关注 */ -->
			</div>
			<ul class="footer">
				<li><a href="#"><span>&#xe8b9;</span><span>首页</span></a></li>
				<li><a href="#"><span>&#xe614;</span><span>课程</span></a></li>
				<li><a href="#"><span style="color: orange;">&#xe8bd;</span><span>话题</span></a></li>
				<li><a href="#"><span >&#xe8a0;</span><span>我的</span></a></li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	var tab = document.querySelector('.tab');
	var lis = tab.querySelectorAll('li');
	var items = document.querySelectorAll('.item');
	
	for(var i=0;i<=lis.length-1;i++){
		lis[i].setAttribute('index',i);
		lis[i].onclick = function(){
			for(var i =0;i<lis.length;i++){
				lis[i].className='';
			}
			this.className='cotten';
			var index = this.getAttribute('index');
			
			for(var i=0;i<=items.length-1;i++){
				items[i].style.display='none';
			}
			items[index].style.display='block';
		}
		
	}
</script>
